<template>
  <view class="comment-item">
    <view class="comment-user">
      <image class="user-avatar" :src="comment.user.avatar" mode="aspectFill"></image>
      <view class="user-info">
        <view class="user-name-wrapper">
          <text class="user-name">{{comment.user.name}}</text>
          <view class="user-badge" v-if="comment.user.badge">{{comment.user.badge}}</view>
        </view>
        <view class="comment-time">{{comment.time}}</view>
      </view>
    </view>
    
    <view class="comment-content">
      <text class="content-text">{{comment.content}}</text>
      <view class="content-images" v-if="comment.images && comment.images.length > 0">
        <image 
          class="content-image" 
          v-for="(image, index) in comment.images" 
          :key="index" 
          :src="image" 
          mode="aspectFill"
          @click="previewImages(index)"
        ></image>
      </view>
    </view>
    
    <view class="comment-actions">
      <view class="action-item" @click="onLike">
        <text class="iconfont like-icon" :class="{'like-active': comment.isLiked}">&#xe60d;</text>
        <text class="action-count">{{comment.likes}}</text>
      </view>
      <view class="action-item" @click="onReply">
        <text class="iconfont reply-icon">&#xe602;</text>
        <text class="action-count">{{comment.replies ? comment.replies.length : 0}}</text>
      </view>
    </view>
    
    <!-- 回复列表 -->
    <view class="reply-list" v-if="comment.replies && comment.replies.length > 0 && showReplies">
      <view class="reply-item" v-for="(reply, index) in comment.replies" :key="index">
        <view class="reply-user">
          <image class="reply-avatar" :src="reply.user.avatar" mode="aspectFill"></image>
          <view class="reply-info">
            <view class="reply-name-wrapper">
              <text class="reply-name">{{reply.user.name}}</text>
              <view class="reply-badge" v-if="reply.user.badge">{{reply.user.badge}}</view>
            </view>
            <text class="reply-content">{{reply.content}}</text>
            <view class="reply-time">{{reply.time}}</view>
          </view>
        </view>
      </view>
      <view class="more-replies" v-if="comment.replies.length > 3" @click="toggleReplies">
        {{ showAllReplies ? '收起回复' : '查看全部' + comment.replies.length + '条回复' }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showReplies: true,
      showAllReplies: false
    };
  },
  methods: {
    onLike() {
      this.$emit('like', this.comment.id);
    },
    onReply() {
      this.$emit('reply', this.comment.user.name);
    },
    previewImages(index) {
      uni.previewImage({
        urls: this.comment.images,
        current: this.comment.images[index]
      });
    },
    toggleReplies() {
      this.showAllReplies = !this.showAllReplies;
    }
  }
};
</script>

<style lang="scss">
.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #F5F5F5;
  
  .comment-user {
    display: flex;
    margin-bottom: 10px;
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin-right: 10px;
    }
    
    .user-info {
      flex: 1;
      
      .user-name-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        
        .user-name {
          font-size: 14px;
          font-weight: bold;
          color: #333333;
          margin-right: 5px;
        }
        
        .user-badge {
          font-size: 10px;
          color: #FFFFFF;
          background-color: #1E90FF;
          padding: 1px 4px;
          border-radius: 2px;
        }
      }
      
      .comment-time {
        font-size: 12px;
        color: #999999;
      }
    }
  }
  
  .comment-content {
    padding-left: 50px;
    margin-bottom: 10px;
    
    .content-text {
      font-size: 14px;
      color: #333333;
      line-height: 1.5;
    }
    
    .content-images {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      
      .content-image {
        width: 80px;
        height: 80px;
        margin-right: 5px;
        margin-bottom: 5px;
        border-radius: 4px;
      }
    }
  }
  
  .comment-actions {
    display: flex;
    padding-left: 50px;
    
    .action-item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      
      .like-icon, .reply-icon {
        font-size: 14px;
        color: #999999;
        margin-right: 5px;
        
        &.like-active {
          color: #FF4500;
        }
      }
      
      .action-count {
        font-size: 12px;
        color: #999999;
      }
    }
  }
  
  .reply-list {
    margin-top: 10px;
    padding: 10px;
    background-color: #F8F8F8;
    border-radius: 4px;
    margin-left: 50px;
    
    .reply-item {
      margin-bottom: 10px;
      
      .reply-user {
        display: flex;
        
        .reply-avatar {
          width: 24px;
          height: 24px;
          border-radius: 12px;
          margin-right: 8px;
        }
        
        .reply-info {
          flex: 1;
          
          .reply-name-wrapper {
            display: flex;
            align-items: center;
            
            .reply-name {
              font-size: 12px;
              color: #666666;
              margin-right: 5px;
            }
            
            .reply-badge {
              font-size: 9px;
              color: #FFFFFF;
              background-color: #1E90FF;
              padding: 0 3px;
              border-radius: 2px;
            }
          }
          
          .reply-content {
            font-size: 12px;
            color: #333333;
            line-height: 1.4;
          }
          
          .reply-time {
            font-size: 10px;
            color: #999999;
            margin-top: 2px;
          }
        }
      }
    }
    
    .more-replies {
      font-size: 12px;
      color: #1E90FF;
      text-align: center;
      padding: 5px 0;
    }
  }
}
</style> 